<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>

<!--    引入js-->
    <script src="js/axios-0.18.0.js"></script>
</head>
<body>
<div id="app">
    <el-table
            :data="tableData"
            height="500"
            border
            style="width: 100%">
        <el-table-column
                prop="id"
                label="序列"
                width="180">
        </el-table-column>
        <el-table-column
                prop="date"
                label="日期"
                width="180">
        </el-table-column>
        <el-table-column
                prop="name"
                label="姓名"
                width="180">
        </el-table-column>
        <el-table-column
                prop="address"
                label="地址">
        </el-table-column>
    </el-table>
    <div>{{he}}</div>
    <div v-model="tableData"></div>
</div>


</body>
<script>
    var app = new Vue({
        el: '#app',
        data:{
            he:"aaa",
            tableData:[]
                // [
    // {
        //         id:1,
        //         date: '2016-05-03',
        //         name: '王小虎',
        //         address: '上海市普陀区金沙江路 1518 弄'
        //     }, {
        //         id:1,
        //         date: '2016-05-02',
        //         name: '王小虎',
        //         address: '上海市普陀区金沙江路 1518 弄'
        //     }, {
        //         id:1,
        //         date: '2016-05-04',
        //         name: '王小虎',
        //         address: '上海市普陀区金沙江路 1518 弄'
        //     }, {
        //         id:1,
        //         date: '2016-05-01',
        //         name: '王小虎',
        //         address: '上海市普陀区金沙江路 1518 弄'
        //     }, {
        //         id:1,
        //         date: '2016-05-08',
        //         name: '王小虎',
        //         address: '上海市普陀区金沙江路 1518 弄'
        //     }, {
        //         id:1,
        //         date: '2016-05-06',
        //         name: '王小虎',
        //         address: '上海市普陀区金沙江路 1518 弄'
        //     }, {
        //         id:1,
        //         date: '2016-05-07',
        //         name: '王小虎',
        //         address: '上海市普陀区金沙江路 1518 弄'
        //     }
        //      ]

        },
        created(){
            this.findPage();
        },
        methods:{

            findPage() {
                var _this = this;
                axios.get("/show/data").then((res)=>{
                        _this.tableData =res.data;
                })
            }
        }

    })


</script>
</html>